<template>
  <div class="grid-content bg-purple">
    <div class="header">
      <p>今日数据</p>
      <div class="refresh-box">2023-05-19 19:35</div>
    </div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="label">订单金额(元)</div>
        <div id="my-number" class="value">{{ todayData.orderAmount }}</div>
        <div class="bottom">较昨日 +{{ todayData.orderAmountChanges }}</div>
      </el-col>
      <el-col :span="8">
        <div class="label">订单数量(笔)</div>
        <div id="my-number" class="value">{{ todayData.orderNumber }}</div>
        <div class="bottom">较昨日 +{{ todayData.orderNumberChanges }}</div> </el-col><el-col :span="8">
        <div class="label">运输任务(次)</div>
        <div id="my-number" class="value">{{ todayData.transportTaskNumber }}</div>
        <div class="bottom">较昨日 +{{ todayData.transportTaskNumberChanges }}</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  // props: {
  //   todayData: {
  //     type: Object, // 类型
  //     required: true // 是否必填
  //   }
  // }
  computed: {
    ...mapGetters(['todayData'])
  }
}
</script>

<style lang="scss" scoped>
.grid-content {
  // height: 230px;
  border-radius: 4px;
  min-height: 36px;
  font-size: 16px;
  padding: 23px 20px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    p {
      font-size: 16px;
      font-weight: 700;
    }
    .refresh-box {
      font-size: 14px;
      color: #818693;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
  }
  .el-row {
    box-sizing: border-box;
    display: flex;
    align-items: baseline;
    text-align: center;
    margin-bottom: 30px;
    margin-top: 16px;
    padding-left: 10px;
    .label {
      font-size: 14px;
      color: #20232a;
      margin-bottom: 21px;
      //   text-align: center;
    }
    .value {
      font-size: 36px;
      color: #20232a;
      font-weight: 700;
      margin-bottom: 24px;
      //   text-align: center;
    }
    .bottom {
      justify-content: center;
      padding-left: 9px;
      font-size: 14px;
      color: #818693;
      margin-bottom: 20px;
      display: flex;
      //   text-align: center;
    }
  }
}
</style>
